<template>
  <el-form
    ref="form"
    class="login_container"
    :model="form"
    status-icon
    :rules="rules"
    label-width="70px"
  >
    <div style="padding-top: 20px">
      <el-form-item label="手机号" prop="username">
        <el-input v-model="form.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="form.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
    </div>
    <div style="display: flex; justify-content: center">
      <el-form-item label-width="10px">
        <el-button @click="confirm" type="primary">确认修改</el-button>
      </el-form-item>
    </div>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      // 校验规则
      rules: {
        username: [
          {
            required: "true",
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: "true",
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    form() {
      return (
        this.$store.state.user.userInfo ||
        JSON.parse(window.localStorage.getItem("userInfo"))
      );
    },
  },
  methods: {
    confirm() {
      // 表单的校验
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$message.success("修改成功");
        }
      });
    },
  },
};
</script>

<style scoped>
</style>